<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>css_index</title>
    <script type="text/javascript" src="/public/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/public/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/public/js/prettify.js"></script>
    <script type="text/javascript" src="/public/js/application.js"></script>


    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="/public/css/prettify.css" rel="stylesheet">
    <link href="/public/css/docs.css" rel="stylesheet">
</head>

<body>
<div class="container">

<div class="row">
    <div class="span6">
        <h2>Google Prettify 美化代码</h2>
        <p>在 <code>&lt;pre&gt;</code> 元素上应用 <code>.prettyprint</code> 和 <code>.linenums</code> 增强代码渲染效果。 <code>.linenums</code> 用于显示行号。</p>
        <pre style="margin-bottom: 9px;" class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;p&gt;</span><span class="pln">示范文本...</span><span class="tag">&lt;/p&gt;</span></li></ol></pre>
        <pre style="margin-bottom: 9px;" class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;pre</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"prettyprint</span></li><li class="L1"><span class="atv">     linenums"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  &amp;lt;p&amp;gt;示范文本...&amp;lt;/p&amp;gt;</span></li><li class="L3"><span class="tag">&lt;/pre&gt;</span></li></ol></pre>
        <p><a href="http://code.google.com/p/google-code-prettify/">下载 google-code-prettify</a> 并查看 <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">使用指南</a>.</p>
    </div>
</div>

<form class="well form-search">
    <label>标签名称</label>
    <input type="text" placeholder="请输入文字..." class="span3"> <span class="help-inline">相关提示信息</span>
    <p class="help-block">块状帮助文字...</p>
    <label class="checkbox">
        <input type="checkbox"> 选我选我
    </label>
    <button class="btn" type="submit">提交</button>
</form>

<form class="well form-search">
    <input class="input-medium search-query" type="text">
    <button class="btn" type="submit">搜索</button>
</form>


<form class="well form-inline">
    <input type="text" class="input-small" placeholder="邮件">
    <input type="password" class="input-small" placeholder="密码">
    <label class="checkbox">
        <input type="checkbox"> 记住我
    </label>
    <button type="submit" class="btn">登录</button>
</form>

<div class="span8">
    <form class="form-horizontal">
        <fieldset>
            <legend>Bootstrap支持的控件</legend>
            <div class="control-group">
                <label for="input01" class="control-label">文本输入框</label>
                <div class="controls">
                    <input type="text" id="input01" class="input-xlarge">
                    <p class="help-block">
                        除了文本域之外，任何HTML5输入框都是该样式
                    </p>
                </div>
            </div>
            <div class="control-group">
                <label for="optionsCheckbox" class="control-label">复选框</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" value="option1" id="optionsCheckbox">
                        选择异或不许&mdash;使用时最好给出选择的理由
                    </label>
                </div>
            </div>
            <div class="control-group">
                <label for="select01" class="control-label">选择框</label>
                <div class="controls">
                    <select id="select01">
                        <option>请选择</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label for="multiSelect" class="control-label">复选框</label>
                <div class="controls">
                    <select id="multiSelect" multiple="multiple">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label for="fileInput" class="control-label">上传框</label>
                <div class="controls">
                    <input type="file" id="fileInput" class="input-file">
                </div>
            </div>
            <div class="control-group">
                <label for="textarea" class="control-label">文本域</label>
                <div class="controls">
                    <textarea rows="3" id="textarea" class="input-xlarge"></textarea>
                </div>
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" type="submit">保存更改</button>
                <button class="btn">取消</button>
            </div>
        </fieldset>
    </form>
</div>

<div class="row">
    <div class="span8">
        <form class="form-horizontal">
            <fieldset>
                <legend>表单控件状态</legend>
                <div class="control-group">
                    <label for="focusedInput" class="control-label">已获得焦点的输入框</label>
                    <div class="controls">
                        <input type="text" value="已获得焦点" id="focusedInput" class="input-xlarge focused">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">不可编辑的输入框</label>
                    <div class="controls">
                        <span class="input-xlarge uneditable-input">不可编辑，只读</span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="disabledInput" class="control-label">被禁用的输入框</label>
                    <div class="controls">
                        <input type="text" disabled="" placeholder="输入框被禁用" id="disabledInput" class="input-xlarge disabled">
                    </div>
                </div>
                <div class="control-group">
                    <label for="optionsCheckbox2" class="control-label">被禁用的复选框</label>
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" disabled="" value="option1" id="optionsCheckbox2">
                            被禁用
                        </label>
                    </div>
                </div>
                <div class="control-group warning">
                    <label for="inputWarning" class="control-label">Warning状态的输入框</label>
                    <div class="controls">
                        <input type="text" id="inputWarning">
                        <span class="help-inline">警告信息</span>
                    </div>
                </div>
                <div class="control-group error">
                    <label for="inputError" class="control-label">Error状态的输入框</label>
                    <div class="controls">
                        <input type="text" id="inputError">
                        <span class="help-inline">错误信息</span>
                    </div>
                </div>
                <div class="control-group success">
                    <label for="inputSuccess" class="control-label">Success状态的输入框</label>
                    <div class="controls">
                        <input type="text" id="inputSuccess">
                        <span class="help-inline">耶！</span>
                    </div>
                </div>
                <div class="control-group success">
                    <label for="selectError" class="control-label">Success状态的下拉框</label>
                    <div class="controls">
                        <select id="selectError">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                        <span class="help-inline">耶！</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn btn-primary" type="submit">保存更改</button>
                    <button class="btn">取消</button>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="span4">
        <h3>重新设计的浏览器状态</h3>
        <p>
            Bootstrap重新设计了浏览器本身所定义的 <code>focused</code> 和 <code>disabled</code> 状态。
            我们去除了Webkit默认的 <code>outline</code> 并对 <code>:focus</code> 状态应用了 <code>box-shadow</code> 。
        </p>
        <hr>
        <h3>表单验证</h3>
        <p>
            Bootstrap还包含error,warning,success的验证样式。使用时将error类添加到控件外层的 <code>.control-group</code> 元素上即可。
        </p>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;fieldset</span></li><li class="L1"><span class="pln">  </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-group error"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  …</span></li><li class="L3"><span class="tag">&lt;/fieldset&gt;</span></li></ol></pre>
    </div>
</div>


<div class="span8">
    <form class="form-horizontal">
        <fieldset>
            <legend>扩展表单控件</legend>
            <div class="control-group">
                <label class="control-label">栅格指定尺寸</label>
                <div class="controls docs-input-sizes">
                    <input type="text" placeholder=".span1" class="span1">
                    <input type="text" placeholder=".span2" class="span2">
                    <input type="text" placeholder=".span3" class="span3">
                    <select class="span1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <select class="span2">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <select class="span3">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <p class="help-block">
                        同样是使用 <code>.span*</code> 类来指定输入框大小
                    </p>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">别名指定尺寸</label>
                <div class="controls docs-input-sizes">
                    <input type="text" placeholder=".input-mini" class="input-mini">
                    <input type="text" placeholder=".input-small" class="input-small">
                    <input type="text" placeholder=".input-medium" class="input-medium">
                    <input type="text" placeholder=".input-big" class="input-big">
                    <p class="help-block">
                        静态类指定的尺寸与栅格系统的尺寸并不匹配，且自适应响应式样式，只对几种控件有效(比如 <code>input</code> 和 <code>select</code>).
                    </p>
                </div>
            </div>
            <div class="control-group">
                <label for="prependedInput" class="control-label">前置文本</label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on">@</span><input type="text" size="16" id="prependedInput" class="span2">
                    </div>
                    <p class="help-block">这里显示帮助信息</p>
                </div>
            </div>
            <div class="control-group">
                <label for="appendedInput" class="control-label">后置文本</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="text" size="16" id="appendedInput" class="span2"><span class="add-on">.00</span>
                    </div>
                    <span class="help-inline">这里显示帮助信息</span>
                </div>
            </div>
            <div class="control-group">
                <label for="appendedPrependedInput" class="control-label">前置+后置文本</label>
                <div class="controls">
                    <div class="input-prepend input-append">
                        <span class="add-on">$</span><input type="text" size="16" id="appendedPrependedInput" class="span2"><span class="add-on">.00</span>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label for="appendedPrependedInput" class="control-label">后置按钮</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="text" size="16" id="appendedPrependedInput" class="span2"><button type="button" class="btn">执行</button>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label for="inlineCheckboxes" class="control-label">行级复选框</label>
                <div class="controls">
                    <label class="checkbox inline">
                        <input type="checkbox" value="option1" id="inlineCheckbox1"> 1
                    </label>
                    <label class="checkbox inline">
                        <input type="checkbox" value="option2" id="inlineCheckbox2"> 2
                    </label>
                    <label class="checkbox inline">
                        <input type="checkbox" value="option3" id="inlineCheckbox3"> 3
                    </label>
                </div>
            </div>
            <div class="control-group">
                <label for="optionsCheckboxList" class="control-label">多复选框</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" value="option1" name="optionsCheckboxList1">
                        第一个选项，最好给出将其做为首选的理由
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" value="option2" name="optionsCheckboxList2">
                        第二个选项，同样可选并包含在表单结果中
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" value="option3" name="optionsCheckboxList3">
                        第三个选项，同样可选并包含在表单结果中
                    </label>
                    <p class="help-block"><strong>注意</strong>
                        建议使用label标签将option选项包裹起来，这样可以提供更大的点击区域，提升表单可用性。
                    </p>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">单选钮</label>
                <div class="controls">
                    <label class="radio">
                        <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">
                        第一个选项，最好给出将其做为首选的理由
                    </label>
                    <label class="radio">
                        <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">
                        第二个选项，如果选译该选项就会取消第一个选项。
                    </label>
                </div>
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" type="submit">提交更改</button>
                <button class="btn">取消</button>
            </div>
        </fieldset>
    </form>
</div>

<div class="row">
<table class="table table-bordered table-striped span8">
    <thead>
    <tr>
        <th>按钮</th>
        <th>类class=""</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><button href="#" class="btn">默认</button></td>
        <td><code>btn</code></td>
        <td>带渐变的标准灰色按钮</td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-primary">首要</button></td>
        <td><code>btn btn-primary</code></td>
        <td>
            视觉吸引力强，用于标识一组按钮中最主要的那个动作
        </td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-info">信息</button></td>
        <td><code>btn btn-info</code></td>
        <td>
            可用于替换默认样式
        </td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-success">成功</button></td>
        <td><code>btn btn-success</code></td>
        <td>
            表示操作成功或动作正确
        </td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-warning">警告</button></td>
        <td><code>btn btn-warning</code></td>
        <td>
            表示该动作应谨慎
        </td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-danger">危险</button></td>
        <td><code>btn btn-danger</code></td>
        <td>
            表示危险或有潜在威胁的动作。
        </td>
    </tr>
    <tr>
        <td><button href="#" class="btn btn-inverse">相反</button></td>
        <td><code>btn btn-inverse</code></td>
        <td>
            做为补充的深灰色按钮，与具体行为或动作无关。
        </td>
    </tr>
    </tbody>
</table>

<div class="span4">
    <h3>按钮类可用于多种标签</h3>
    <p>
        可以在<code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code> 等元素上使用 <code>.btn</code> 类。
    </p>
    <form>
        <a href="" class="btn">超链接按钮</a>
        <button type="submit" class="btn">button按钮</button>
        <input type="button" value="input-button按钮" class="btn">
        <input type="submit" value="input-submit按钮" class="btn">
    </form>
    <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">超链接按钮</span><span class="tag">&lt;/a&gt;</span></li><li class="L1"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  button按钮</span></li><li class="L3"><span class="tag">&lt;/button&gt;</span></li><li class="L4"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span></li><li class="L5"><span class="pln">         </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"input-button按钮"</span><span class="tag">&gt;</span></li><li class="L6"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span></li><li class="L7"><span class="pln">         </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"input-submit按钮"</span><span class="tag">&gt;</span></li></ol></pre>
    <p>
        做为最佳实践，出于跨浏览器兼容的考虑，建议您根据内容为按钮选择最合适的元素。比如你正在使用 <code>input</code> ,就可以将按钮设计为
        <code>&lt;input type="submit"&gt;</code> 。
    </p>
</div>
</div>



<div class="row">
    <div class="span4">
        <div style="margin-bottom: 9px" class="btn-toolbar">
            <div class="btn-group">
                <a href="#" class="btn"><i class="icon-align-left"></i></a>
                <a href="#" class="btn"><i class="icon-align-center"></i></a>
                <a href="#" class="btn"><i class="icon-align-right"></i></a>
                <a href="#" class="btn"><i class="icon-align-justify"></i></a>
            </div>
            <div class="btn-group">
                <a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i> 用户</a>
                <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="icon-pencil"></i> 修改</a></li>
                    <li><a href="#"><i class="icon-trash"></i> 删除</a></li>
                    <li><a href="#"><i class="icon-ban-circle"></i> 禁止</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="i"></i> 设为管理员</a></li>
                </ul>
            </div>
        </div>
        <p>
            <a href="#" class="btn"><i class="icon-refresh"></i> 刷新</a>
            <a href="#" class="btn btn-success"><i class="icon-shopping-cart icon-white"></i> 签出</a>
            <a href="#" class="btn btn-danger"><i class="icon-trash icon-white"></i> 删除</a>
        </p>
        <p>
            <a href="#" class="btn btn-large"><i class="icon-comment"></i> 评论</a>
            <a href="#" class="btn btn-small"><i class="icon-cog"></i> 设置</a>
            <a href="#" class="btn btn-small btn-info"><i class="icon-info-sign icon-white"></i> 更多信息</a>
        </p>
    </div>
    <div class="span4">
        <div style="padding: 8px 0;" class="well">
            <ul class="nav nav-list">
                <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
                <li><a href="#"><i class="icon-book"></i> 类库</a></li>
                <li><a href="#"><i class="icon-pencil"></i> 应用</a></li>
                <li><a href="#"><i class="i"></i> 音乐</a></li>
            </ul>
        </div> <!-- /well -->
    </div>
    <div class="span4">
        <form>
            <div class="control-group">
                <label for="inputIcon" class="control-label">邮件地址</label>
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-envelope"></i></span><input type="text" style="margin:0;" id="inputIcon" class="span2">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>



<div class="span4">
    <h3>简介和例子</h3>
    <p>
        在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。
    </p>
    <div style="margin-top: 18px;" class="btn-toolbar">
        <div class="btn-group">
            <button class="btn">动作</button>
            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-primary">动作</button>
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-danger">危险</button>
            <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-warning">警告</button>
            <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-success">成功</button>
            <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
            <button class="btn btn-info">信息</button>
            <button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-inverse">逆操作</button>
            <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
    <h3>尺寸</h3>
    <p>
        使用 <code>.btn-mini</code>, <code>.btn-small</code>, 和 <code>.btn-large</code> 指定大小。
    </p>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-large">大按钮</button>
            <button data-toggle="dropdown" class="btn btn-large dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-small">小按钮</button>
            <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-mini">迷你按钮</button>
            <button data-toggle="dropdown" class="btn btn-mini dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">其他动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </div><!-- /btn-group -->
    </div><!-- /btn-toolbar -->
</div>


<div class="row">
    <div style="margin-bottom: 9px;" class="tabbable span3">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#1">段 1</a></li>
            <li class=""><a data-toggle="tab" href="#2">段 2</a></li>
            <li class=""><a data-toggle="tab" href="#3">段 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="1" class="tab-pane active">
                <p>这里是段1</p>
            </div>
            <div id="2" class="tab-pane">
                <p>这里是段2</p>
            </div>
            <div id="3" class="tab-pane">
                <p>这里是段3</p>
            </div>
        </div>
    </div>

    <div class="tabbable tabs-below span3">
        <div class="tab-content">
            <div id="A" class="tab-pane">
                <p>这里是章节A</p>
            </div>
            <div id="B" class="tab-pane">
                <p>这里是章节B</p>
            </div>
            <div id="C" class="tab-pane active">
                <p>这里是章节C</p>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class=""><a data-toggle="tab" href="#A">第1节</a></li>
            <li class=""><a data-toggle="tab" href="#B">第2节</a></li>
            <li class="active"><a data-toggle="tab" href="#C">第3节</a></li>
        </ul>
    </div>



</div>


<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a href="#" class="brand">项目名称</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">链接</a></li>
                    <li><a href="#">链接</a></li>
                    <li><a href="#">链接</a></li>
                </ul>
                <form class="navbar-search pull-left">
                    <input type="text" placeholder="Search" class="search-query">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="alert">
    <a data-dismiss="alert" class="close">×</a>
    <strong>外交部警告！</strong> 不要拿法律当挡箭牌。
</div>

<div class="progress progress-info progress-striped active">
    <div style="width: 45%" class="bar"></div>
</div>



<div class="modal hide fade" id="myModal" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close">×</a>
        <h3>对话框标题</h3>
    </div>
    <div class="modal-body">
        <h4>对话框文字</h4>
        <p>
            高考临近，湖北孝感惊现史上最刻苦“吊瓶班”。这是昨日孝感市第一高级中学某晚自习教室的一幕，"吊瓶高考班"轰动全校！不知台上的老师面对如此震撼的场面和沁人心脾的药水味，如何站稳脚跟hold住全场呢？该校学生表示，备战高考，补充能量挨几针也是值得的，你hold住了吗？
        </p>

        <h4>对话框中的弹出提示</h4>
        <p> <a data-content="青岛工学院最近下发通知，将考研自习室772个座位“有偿提供”，5元起售，目前已售出500多个座位。根据采光通风等条件不同，座位每月收费划分为5元、10元、15元、20元、25元五个档次，学生购买时要一次交纳10个月的费用。教务处长称， 为了给学生解决考研复习问题，只好“出此下策”。" class="btn popover-test" href="#" data-original-title="花钱买座位">学生真不易</a> 把鼠标放上来试试？</p>

        <h4>对话框中的工具提示</h4>
        <p>
            5月1日，济南一名<a class="tooltip-test" href="#" data-original-title="城管里面也有好人，把他们变成坏人的是恶的制度">城管</a>要对一位抱着三四岁孩子的<a class="tooltip-test" href="#" data-original-title="小商贩真的很辛苦，不要再欺负辛劳人了">女商贩</a>扣留时候发生争执。争执中女商贩抱着孩子给城管下跪,城管见状也向女商贩跪下。事后城管称，下跪是为了与对方“平等对话”,也怕对孩子心理产生不良影响。
        </p>

        <hr>

        <h4>对溢出文本使用可选的滚动条</h4>
        <p>
            我们对 <code>.modal-body</code> 样式修正了 <code>max-height</code> 。对于超过高度的内容就会显示滚动条。
        </p>
        <p>南京街头某家麦当劳门口，一个外国人买了两包薯条，分给乞讨的老奶奶一包，两人席地而坐，开心地吃着聊着。</p>
        <p>@说书者一枚 ：《帝都日爆》射论：《从麦当劳事件看美国小伙的拙劣表演》：这位美国小伙拙劣的”亲民民主表演“，再次印证了中国的古语“黄鼠狼给鸡拜年没安好心”。这道貌岸然的潜伏”美国政客“，想用糖衣炮弹瓦解坚强的中国无产阶级老奶奶，必定遭到中国人民的唾弃！不要做自取其辱的丑事！（完，完蛋的完） </p>
        <p>4日晚，东莞东城海雅百货前，一女子被偷包，巴西籍男子MOZEN阻止，遭小偷团伙报复群殴。其间数十名路人在场，无人施救。MOZEN说，小偷打他，他觉得正常，可没有任何人帮他，让他觉得不正常，“这个社会是需要互相帮助的，我整天出没在君豪商业中心，中心几乎大部分人都认识我，却没有一个人帮我，这让我觉得很失望，很心寒”。</p>
        <p>MOZEN说，海雅百货这一带治安很乱，这已经不是他第一次阻止小偷行窃了，早在今年春节前，他就曾扑倒过一个小偷。可有了这一次的经历，如果下回再碰上类似情况，他不会也不敢再帮忙了。</p>
        <p>美国总统富兰克林·罗斯福1942年6月14日美国国旗纪念日广播演讲：“我们所有人都是地球的子孙，有些道理不言而喻，如果我们的兄弟在遭受压迫，我们也将遭受压迫，如果他们在忍饥挨饿，我们也将忍饥挨饿，如果他们的自由权利被剥夺，我们的自由也将不复存在......<a href="http://t.cn/aDoq5K"></a>http://t.cn/aDoq5K</p>
    </div>
    <div class="modal-footer">
        <a data-dismiss="modal" class="btn" href="#">关闭</a>
        <a class="btn btn-primary" href="#">保存更改</a>
    </div>
</div>
<a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">点击演示</a>
<script>

    $('#myModal').on('show', function () {
        alert('show');
    });
    $('#myModal').on('shown', function () {
        alert('shown');
    });

</script>


<ul class="nav nav-pills">
    <li><a href="#">规则的链接</a></li>
    <li id="menutest2" class="dropdown">
        <a href="#menutest2" data-toggle="dropdown" class="dropdown-toggle">
            下拉项
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">动作</a></li>
            <li><a href="#">另一个动作</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">被间隔的链接</a></li>
        </ul>
    </li>
    <li class="active">
        <a href="#menutest2" data-toggle="dropdown">
            点击我看看
        </a>
    </li>

</ul>
<script>
    $('#menutest2').dropdown();

</script>




<div class="row alert alert-block alert-error fade in">
    <a href="#" data-dismiss="alert" class="close">×</a>
    <h4 class="alert-heading">微博控们注意了！</h4>
    <p>
        出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”
    </p>
    <p>
        <a href="#" class="btn btn-danger">接受建议</a> <a href="#" class="btn">不当回事</a>
    </p>
    <script>
        //$(".alert").alert('close');

    </script>

    <button class="btn btn-primary" data-loading-text="loading..." id="fat-btn">
        载入状态
    </button>
    <script>
        $('.btn').button('complete');
    </script>
</div>


<div id="accordion2" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
                国土问题
            </a>
        </div>
        <div class="accordion-body in" id="collapseOne" style="height: auto;">
            <div class="accordion-inner">
                前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
                门票问题
            </a>
        </div>
        <div class="accordion-body collapse" id="collapseTwo" style="height: 0px;">
            <div class="accordion-inner">
                目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapseThree" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
                超生罚款
            </a>
        </div>
        <div class="accordion-body collapse" id="collapseThree" style="height: 0px;">
            <div class="accordion-inner">
                学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
            </div>
        </div>
    </div>
</div>



<div class="well">
    <input type="text" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="4" data-provide="typeahead" style="margin: 0 auto;" class="span3">
</div>


<div class="row">

    <div class="span9 columns">
        <h2>轮播的例子</h2>
        <p>观察下面的幻灯片</p>
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item">
                    <img alt="" src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg">
                    <div class="carousel-caption">
                        <h4>即使杀光所有报晓的公鸡，天，还是会亮的</h4>
                        <p>
                            @shifeike: 昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。这个2010年1月为反对红中抢笔而注册的微博，两年多时间里发了14538条微博，加上被删除的差不多近200万字，积累了96269条粉丝，自此灰飞烟灭。
                        </p>
                    </div>
                </div>
                <div class="item active">
                    <img alt="" src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg">
                    <div class="carousel-caption">
                        <h4>如果人民不欢迎我们，就该我们下台了</h4>
                        <p>
                            【胡耀邦语录】①历史是混不过去的。②民主、自由、平等、博爱等观念是人类精神的一大解放。③如果人民不欢迎我们，就该我们下台了。④不懂的不要装懂，不通的不要装通，不服的不要装服。⑤中国的出路是民主和科学。⑥一个精神上、组织上被禁锢被压制的不自由民族怎么可能与其他国家进行自由竞争呢？
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg">
                    <div class="carousel-caption">
                        <h4>国家像需要空气一样需要变革</h4>
                        <p>
                            据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈·佩尔沃兹万内勋章。戈尔巴乔夫在受勋时表示感谢，并称很激动。他坦言，对自己做过的事情问心无愧。他强调，他进行改革不是为了赢得敬重和荣誉，而是因为认识到，“国家像需要空气一样需要变革”。他承认犯过错误，并至今还在为这些错误而烦恼。但他认为：“短短几年所走过的路，使专制的过去永远成为了历史。”
                        </p>
                    </div>
                </div>
            </div>
            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>
        <div class="alert alert-info">
            <strong>强调！</strong>
            实现轮播时，请移除我们提供的图片，替换为你自己的。
        </div>


    </div>
</div>

</div>
</body>
</html>
